import React from "react";
import {Modal} from "antd";
import {Hls} from "./Hls";

interface RecordProps {

  recordVideoVisible: boolean
  videoRecord: {
    stream: string,
    vhost: string,
    m3u8_url: string,
  }
  closeRecordVideo: (e: React.MouseEvent<HTMLElement>) => void
}

export class Record extends React.Component<RecordProps, {}> {

  showVideo() {
    if (this.props.recordVideoVisible) {
      return <Hls videoId={this.props.videoRecord.stream}
                  videoRef={this.props.videoRecord.stream}
                  videoUrl={`http://${this.props.videoRecord.vhost}:18080/${this.props.videoRecord.m3u8_url}`}
      />
    }
  }

  render() {
    return <Modal
      title="录播视频"
      visible={this.props.recordVideoVisible}
      closable={true}
      onCancel={this.props.closeRecordVideo}
      destroyOnClose={true}
      footer={null}
    >
      {
        this.showVideo()
      }
    </Modal>
  }

}